<template>
    <div class="problem">
      <breadcrumb class="breadcrumb" :navigation="navigation"></breadcrumb>
      <div class="problem-content">
        <div class="sort"
             @mouseenter="mouseStart(1)"
             @mouseleave="mouseEnd(1)">
          <div class="sort-list-label">
            按时间进行排序
            <span class="iconfont">&#xe6b3;</span>
          </div>
          <ul class="sort-ul" v-if="sort">
            <li @click="clickItem(0)">时间</li>
            <li @click="clickItem(1)">回答数</li>
          </ul>
        </div>
        <div></div>
        <div class="split"></div>
        <ul class="problem-ul">
          <li v-for="item in problems" :key="item.id">
            <span class="item"
                  v-for="(num, index) in item.nums"
                  :style="[index == select ? color : '']"
                  :key="index"
                  @mouseenter="mouseStart(2, $event)"
                  @mouseleave="mouseEnd(2, $event, index == select ? true : false)">
              <em @click="selectItem(item.id)">
                {{num.text}}
              </em>
              <span @click="selectItem(item.id)">
                {{num.num}}
              </span>
            </span>
            <div class="item-context">
              <span @click="selectItem(item.id)"
                    class="title"
                    @mouseenter="mouseStart(2, $event)"
                    @mouseleave="mouseEnd(2, $event)">
                {{item.title}}
              </span>
              <div class="label">
                <span class="last-item" v-for="(tag, i) in item.tags" :key="i">{{tag.name}}</span>
              </div>
            </div>
          </li>
        </ul>
        <pagination class="pagination" v-if="problems.length > 0" :query="query" @page="handlePage"></pagination>
      </div>
    </div>
</template>

<script>
import Breadcrumb from '../../components/Breadcrumb'
import Pagination from '../../components/Pagination'
import { mapGetters } from 'vuex'
import { list } from '@/api/problem'

export default {
  name: 'Problem',
  data () {
    return {
      navigation: '> 问答',
      color: {
        'color': ''
      },
      query: {
        current: 1,
        size: 20
      },
      select: 0,
      mouse: 0,
      problems: [],
      sort: false
    }
  },
  mounted () {
    this.color.color = this.getBackground
    this.getList()
  },
  methods: {
    getList () {
      list(this.query).then(response => {
        // 判断是否是成功请求
        if (response.data.code === 200) {
          var data = response.data.data
          const list = []
          if (data.records !== undefined) {
            for (var i = 0; i < data.records.length; i++) {
              list[i] = data.records[i]
              const nums = [
                {
                  text: '回答',
                  num: data.records[i].answerNum
                },
                {
                  text: '浏览',
                  num: data.records[i].readNum
                }
              ]
              list[i].nums = nums
              list[i].select = 0
            }
            this.problems = list
          }
          // 总数据量
          this.query.total = data.total
          // 总页数
          this.query.pages = data.pages
        }
      })
    },
    clickItem (index) {
      this.select = index
      this.sort = false
    },
    mouseStart (type, e) {
      if (type === 1) {
        this.sort = true
      }
      if (type === 2) {
        e.currentTarget.style.color = this.getBackground
      }
    },
    mouseEnd (type, e, isSelect) {
      if (type === 1) {
        this.sort = false
      }
      if (type === 2) {
        if (isSelect === undefined || !isSelect) {
          e.currentTarget.style.color = ''
        }
      }
    },
    selectItem (id) {
      this.$router.push({
        path: `/problem_detail/${id}`
      })
    },
    handlePage (query) {
      this.query = query
    }
  },
  watch: {
    // 当前页发生变化时，请求数据
    newCurrent (newValue, oldValue) {
      this.getList()
    }
  },
  computed: {
    ...mapGetters([
      'getBackground'
    ])
  },
  components: {
    Breadcrumb,
    Pagination
  }
}
</script>

<style scoped lang="stylus">
  @import "~styles/custom/mixins.styl"
  .problem
    display flex
    margin 0 20px 0 50px
    opacity 0.9
    flex-flow column
    background #fff
    height fit-content
    .breadcrumb
      padding 20px 0px 0px 20px
    .problem-content
      display flex
      flex-flow column
      .sort
        align-self flex-end
        position relative
        .sort-list-label
          height 37px
          line-height 37px
          font-size 14px
          margin-right 8px
          color #666
          cursor pointer
        .sort-ul
          position absolute
          margin: 0;
          padding: 0;
          border: 1px solid #eee;
          background: #fff;
          z-index: 999;
          top: 38px;
          li
            font-size: 14px;
            color: #a6a9ac;
            height: 32px;
            width: 80px;
            line-height: 32px;
            border-bottom: 1px solid #eee;
            text-align: center;
            margin: 0 10px;
            float: left;
            cursor: pointer;
            margin-bottom: -1px;
            cursor pointer
      .split
        height 1px
        width 690px
        margin-left 16px
        background rgba(28,31,33,.1)
      .problem-ul
        width 708px
        margin-left 14px
        li
          width 670px
          display flex
          flex-flow row
          padding 20px 0 20px 24px
          border-bottom 1px solid rgba(28,31,33,.1)
          .item
            display flex
            flex-flow column
            width: 40px;
            line-height 22px
            margin 0 6px 0
            text-align center
            color #9199a1
            font-weight bold
            cursor pointer
          /*.item:hover*/
            /*color #1FAD4E*/
          /*.read*/
            /*color #1FAD4E*/
          .item-context
            display flex
            flex-flow column
            line-height 20px
            padding-left 14px
            font-size 16px
            text-overflow ellipsis
            white-space nowrap
            font-weight bold
            color #07111B
            line-height: 24px
            .title
              ellipsis()
              cursor pointer
            /*.title:hover*/
              /*color #1FAD4E*/
            .label
              display inline-block
              line-height 16px
              font-size 12px
              color #9199a1
              .last-item
                display inline-block
                padding-left 6px
                line-height 20px
                font-weight normal
                cursor pointer
              .last-item:hover
                color #333333
        li:last-child
          border-bottom none
      .pagination
        display flex
        justify-content flex-end
        margin 10px 10px 14px 0
</style>
